<template>
  <div class="app-container">
    <uc-table url="admin/notice/getInNoticeInfoPage" name="我的通知" ref="noticeTable" pageable table-border
              :search-form="searchForm">
      <template slot="searchForm">
        <el-form size="mini" :inline="true" :model="searchForm" class="demo-form-inline filter-container">
          <!--搜索输入框-->
          <el-form-item>
            <el-select v-model="searchForm.feedbackStatus" placeholder="请选择反馈状态" style="width: 100%">
              <el-option :value=null label="全部"></el-option>
              <el-option :value="0" label="未反馈"></el-option>
              <el-option :value="1" label="已反馈"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="searchForm.readed" placeholder="请选择读取状态" style="width: 100%">
              <el-option :value=null label="全部"></el-option>
              <el-option :value=0 label="未读"></el-option>
              <el-option :value=1 label="已读"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" class="filter-item" @click="handleSearch()">查询</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template slot="columns">
        <!--                <el-table-column prop="enterpriseName" label="所属主体" align="left" :show-overflow-tooltip="true"></el-table-column>-->
        <el-table-column prop="noticeName" label="通知名称" align="left" width="250" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="noticeType" label="通知类型" align="left" width="80" :show-overflow-tooltip="true" >
          <template slot-scope="scope">
            {{ scope.row.type| noticeType }}
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="通知时间" align="left" width="150" :show-overflow-tooltip="true" >
          <template slot-scope="scope">
            {{ scope.row.addTime | dateFormat }}
          </template>
        </el-table-column>
        <!--                <el-table-column prop="receiverName" label="接收人" align="left" :show-overflow-tooltip="true"></el-table-column>-->
        <el-table-column prop="noticeContent" label="通知内容" align="left" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="feedbackContent" label="反馈内容" width="150"  align="left"
                         :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="feedbackStatus" label="反馈状态" width="80" align="left" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            {{ scope.row.feedbackStatus | noticeFeedback }}
          </template>
        </el-table-column>
        <el-table-column prop="feedbackStatus" label="读取状态" width="80" align="left" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            {{ scope.row.readed | readedStatus }}
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="140" align="left" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <!--编辑按钮-->
            <el-button size="mini" icon="el-icon-edit" type="success" @click="handleReaded(scope.row)">已读</el-button>
            <el-button size="mini" icon="el-icon-edit" type="primary" @click="handleEdit(scope.row)">反馈</el-button>
          </template>
        </el-table-column>
      </template>
    </uc-table>

    <el-dialog title="通知反馈" :visible.sync="hidden">
      <div class="form">
        <el-form :model="feedbackForm" ref="feedbackForm" label-width="100px" :rules="feedbackFormRules">
          <el-form-item label="反馈内容" prop="feedbackContent">
            <el-input v-model="feedbackForm.feedbackContent" placeholder="请输入反馈内容" clearable></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" style="text-align: center" class="dialog-footer">
          <el-button type="primary" @click="SubmitText">反馈
          </el-button>
        </div>
      </div>

    </el-dialog>
  </div>
</template>

<script>
import UcTable from "@/components/UcTable/index.vue";
import {handleReaded, updateMyNoticeFeedback} from "@/api/notice";

export default {
  name: "enterpriseList",
  components: {UcTable},
  data() {
    return {
      searchForm: {
        deleted: false,
        readed:0
      },
      deleteLoading: false,
      hidden: false,
      feedbackForm: {
        ucId: '',
      },
      feedbackFormRules: {
        feedbackContent: [{required: true, message: '反馈内容不能为空', trigger: 'blur'}],
      }
    }
  },
  methods: {
    clearInput() {
      this.searchForm.feedbackStatus = null
      this.searchForm.readed = null
      this.handleSearch()
    },
    handleSearch() {
      this.$refs.noticeTable.getTableData(1)
    },
    handleReaded(row) {
      handleReaded({ucId: row.ucId}).then(res => {
        this.handleSearch()
      }).catch(res => {

      })
    },
    handleEdit(val) {
      this.hidden = true
      this.feedbackForm = {}
      this.$nextTick(() => {
        this.$refs['feedbackForm'].clearValidate();
      })
      this.feedbackForm.ucId = val.ucId
    },
    SubmitText() {
      this.$refs['feedbackForm'].validate(valid => {
        if (valid) {
          updateMyNoticeFeedback(this.feedbackForm).then(res => {
            this.$notify.success({
              title: '成功',
              message: "反馈成功成功"
            })
            this.hidden = false
            this.handleSearch()
          }).catch(res => {
            this.$notify.error({
              title: '反馈失败',
              message: res.msg
            })
          })
        } else {
          console.log("表单验证不通过")
        }
      })
    },
  }
}
</script>
